<template>
  <van-popup v-model:show="state.show" class="popup-box" style="height: 100%" position="right">
    <div class="page">
      <global-header :title="title" @back="state.show = false" />
      <main class="page-main">
        <template v-if="keyName == 'RoomAnnou'">
          <div class="py-[15px] bg-[#fff]">
            <div class="px-[15px] text-[15px]">房间公告</div>
            <div>
              <van-field
                clearable
                v-model="state.content"
                rows="2"
                autosize
                type="textarea"
                maxlength="50"
                placeholder="请输入房间公告"
                show-word-limit
              />
            </div>
          </div>
        </template>
        <template v-else-if="keyName == 'RoomNickname' || keyName == 'ChatNickname'">
          <van-field
            clearable
            v-model="state.content"
            :placeholder="`请输入${title}`"
            type="text"
          />
        </template>
        <template v-else>
          <van-field
            clearable
            v-model="state.content"
            :placeholder="`请输入${title}`"
            type="number"
          />
        </template>
      </main>
      <div class="p-[15px]">
        <van-button
          :loading="state.loading"
          :disabled="state.loading"
          loading-text="保存中"
          type="primary"
          block
          @click="handleSubmit"
          >确定</van-button
        >
      </div>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { reqBasisConfigEdit } from "@/api/setting";
import { usePremsStore } from "@/store/modules/prems";
import { useRoomStore } from "@/store/modules/room";
import { toast } from "@/utils/toast";
import { cloneDeep, debounce } from "lodash-es";
import { storeToRefs } from "pinia";

const props = withDefaults(
  defineProps<{
    title: string;
    keyName: BasisConfigKeys;
    keyValue: number | string | null;
  }>(),
  {
    title: "",
    keyName: "RoomAnnou",
    keyValue: null
  }
);
const premsStore = usePremsStore();
const roomStore = useRoomStore();
const { roomInfo } = storeToRefs(roomStore);
const emit = defineEmits(["update"]);
const state = reactive({
  show: false,
  loading: false,
  content: ""
});

const handleSubmit = debounce(
  async () => {
    if (!premsStore.isEditBasisSetting) {
      return toast.fail("暂无权限");
    }
    if (state.content === null || state.content === "") {
      toast.info(`请输入${props.title}`);
      return;
    }
    const stringName = ["RoomAnnou", "RoomNickname", "ChatNickname"];
    try {
      state.loading = true;
      await reqBasisConfigEdit({
        [props.keyName]: stringName.includes(props.keyName)
          ? `${state.content}`
          : Number(state.content)
      });
      toast.success("更新成功");
      if (roomInfo.value) {
        roomInfo.value = cloneDeep({
          ...roomInfo.value,
          [props.keyName]: stringName.includes(props.keyName)
            ? `${state.content}`
            : Number(state.content)
        });
      }
      state.loading = false;
      state.show = false;
    } catch (error) {
      state.loading = false;
      console.log(error);
    }
  },
  500,
  { leading: true, trailing: false }
);

const open = () => {
  state.show = true;
  state.content = props.keyValue as string;
};
defineExpose({
  open
});
</script>
